<template>
  <div>
    <!-- 审批 -->
    <el-card class="box-card" style="margin-top: 10px"  v-if="workStep && canHandle" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>审批</span>
      </div>

      <el-card
        shadow="never"
        style="margin-top: 10px"
       
      >
        <div>
          <el-radio v-model="isForward" :label="false">处理</el-radio>
          <el-radio v-model="isForward" :label="true">转发</el-radio>
        </div>
        <br />
        <div v-if="!isForward">
          <el-form>
            <el-form-item label="表单数据">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="表单数据（与主流程不同，每一步都可能有当前的处理表单数据）"
                v-model="workStep.formData"
              ></el-input>
            </el-form-item>

            <el-form-item label="批语">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="批语 "
                v-model="workStep.comment"
              ></el-input>
            </el-form-item>
            <el-form-item label="驳回节点" v-if="!isPass">
              <el-select
                placeholder="驳回节点"
                size="mini"
                v-model="workStep.rejectToNodeId"
              >
                <el-option
                  v-for="item in workStep.rejectNodes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div>
                <el-radio v-model="isPass" :label="true">通过</el-radio>
                <el-radio v-model="isPass" :label="false">驳回</el-radio>
              </div>

              <el-button
                type="primary"
                size="mini"
                @click="() => (isPass ? passApprove() : rejectApprove())"
                >确定</el-button
              >
            </el-form-item>
          </el-form>

        </div>
        <div v-else>
          <nodeUser :userSelectors="workStep.userSelectors" :users="workStep.users" @ok-click="onUserSelected"></nodeUser>
          <br />
          <el-button type="danger" size="mini" @click="forwardProve"
            >转发/代办</el-button
          >
        </div>
      </el-card>
    </el-card>
    <!-- 审批记录 -->
    <el-card shadow="never" class="card-provehistory" style="margin-top: 10px">
      <div slot="header">
        审批记录
        <el-button type="text" size="mini" @click="getAllTaskStepsOfWorkTask"
          >刷新</el-button
        >
      </div>
      <el-card
        shadow="never"
        style="margin-top: 10px"
        v-for="item in workHistories"
        :key="item.id"
      >
        <div slot="header">
          <span
            ><span class="historylabel">节点：</span>{{ item.nodeName }}</span
          >

          <div style="float: right; padding: 3px 0">
            <span v-if="item.workStepType == 0">
              <span v-if="item.isHandled">
                <el-link
                  :underline="false"
                  v-if="item.handleType == 0"
                  type="success"
                  >通过</el-link
                >
                <el-link
                  :underline="false"
                  v-if="item.handleType == 1"
                  type="danger"
                  >拒绝</el-link
                >
                <el-link
                  :underline="false"
                  v-if="item.handleType == 2"
                  type="info"
                  >撤回</el-link
                >
                <el-link
                  :underline="false"
                  v-if="item.handleType == 3"
                  type="warning"
                  >转发</el-link
                >
                <el-link :underline="false" v-if="item.handleType == 4"
                  >未处理</el-link
                >
              </span>
              <el-link v-else :underline="false" type="info">待处理</el-link>
            </span>
            <span v-else>只读/抄送</span>
          </div>
        </div>
        <div>
          <span class="historylabel">处理人：</span>
          {{ item.handleUser.name }}
        </div>
        <div>
          <p class="historylabel">意见：</p>
          {{ item.comment }}
        </div>
        <div>
          <p class="historylabel">附件:</p>
          {{ item.resourceIds }}
        </div>
        <br />
        <div class="bottom clearfix">
          <time v-if="item.isHandled" class="time">
            <span class="historylabel">处理时间：</span
            >{{ item.handlerTime }}</time
          >
          <el-button
            style="float: right; padding: 3px 0"
            v-if="item.isHandled == 1 && item.handleUser.id == currentUserId"
            type="text"
            @click="withdrawProve(item.id)"
            >撤回</el-button
          >
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import nodeUser from "./nodeUser";
export default {
  components: { nodeUser },
  name: "workflow-simulation",
  props: {
    workflowName: {
      default: "测试流程",
    },
    workflowId: {
      default: "1",
    },
    workflowVersionId: {
      default: "1",
    },
  },
  computed: {
    id() {
      return this.$route.query.id || this.workflowId;
    },
    name() {
      return this.$route.query.name || this.workflowName;
    },
    versionId(){
      return this.$route.query.versionId || this.workflowVersionId;
    },
    canHandle() {
      return (
        this.workHistories.filter(
          (w) =>
            w.handleUser.id == this.$store.state.user.user.id &&
            w.isHandled == 0 &&
            w.workStepType == 0
        ).length > 0
      );
    },
    currentUserId() {
      return this.$store.state.user.user.id;
    },
  },
  watch: {
    currentUserId: {
      handler() {
        this.getAllTaskStepsOfWorkTask();
      },
    },
    isPass: {
      handler() {
        if (this.isPass) this.workStep.rejectToNodeId = null;
        else this.getRejectNodes(); // 载入驳回节点
      },
    },
  },
  data() {
    return {
      formData: "",
      loading: false,
      allUsers:[],
      workTaskForm:{},
      workStep: {
        users:[],
        handleUser: {
          id: "",
        },
        userSelectors: [
          {
            selectorId: "",
            selectorName: "",
            selections: [],
            parameter: "",
            description: "",
            handleType: 0,
          },
        ],
        rejectNodes: [
          {
            id: "",
            name: "",
          },
        ],
        comment: "",
        stepId: "",
        formData: "",
        rejectToNodeId: null,
      },
      workHistories: [],
      isForward: false,
      isPass: true,
      isSimulation:true,
    };
  },
  mounted() {
    this.getAllUserForSimulation();   
  },
  methods: {
    loadHistories(workTaskForm)
    {
      this.workTaskForm = workTaskForm;
      this.callback();
    },
    getAllUserForSimulation() {
      // this.$store.dispatch("user/getAllList").then((res) => {
      this.$store.dispatch("workflow/GetAllUserForSimulation").then((res) => {
        this.allUsers = res;
      });
    },
    getAllTaskStepsOfWorkTask() {
      if (!this.workTaskForm.id || this.workTaskForm.id.length == 0) return;
      this.$store
        .dispatch("workflow/getAllTaskStepsOfWorkTask", {
          worktaskId: this.workTaskForm.id,
        })
        .then((res) => {
          this.workHistories = res;
          //获取当前审批的步骤
          var workStep = this.workHistories.filter(
            (w) =>
              w.handleUser.id == this.$store.state.user.user.id &&
              w.isHandled == 0 &&
              w.workStepType == 0
          )[0];
          this.workStep.handleUser = workStep.handleUser;
          this.workStep.id = workStep.id;
        })
        .catch((e) => {
          this.loading = false;
        });
    },

    getUserName(userId) {
      var users = this.allUsers.filter((u) => u.id == userId);
      return users.length > 0 ? users[0].name : "";
    },
    callback() {
      this.getAllTaskStepsOfWorkTask();
      this.workStep.comment = "";
      this.isPass = true;
    },
    passApprove() {
      this.loading = true;
      const data = {
        workTaskId: this.workTaskForm.id,
        stepId: this.workStep.id,
        comment: this.workStep.comment,
        resourceIds: "",
        formData: this.workStep.formData,
      };
      let _this = this;

      this.$store
        .dispatch("workflow/passProve", data)
        .then((res) => {
          _this.loading = false;
          this.callback();
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    rejectApprove() {
      this.loading = true;
      const data = {
        workTaskId: this.workTaskForm.id,
        stepId: this.workStep.id,
        comment: this.workStep.comment,
        resourceIds: "",
      };
      let _this = this;

      this.$store
        .dispatch("workflow/rejectProve", data)
        .then((res) => {
          _this.loading = false;
          this.callback();
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    forwardProve() {
      this.loading = true;
      const data = {
        workTaskId: this.workTaskForm.id,
        stepId: this.workStep.id,
        comment: this.workStep.comment,
        resourceIds: "",
        userSelectors: this.workStep.userSelectors,
        users: this.workStep.users,
      };
      let _this = this;

      this.$store
        .dispatch("workflow/forwardProve", data)
        .then((res) => {
          _this.loading = false;
          this.callback();
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    withdrawProve(stepId) {
      this.loading = true;
      const data = {
        stepId: stepId,
        comment: this.workStep.comment,
      };
      let _this = this;

      this.$store
        .dispatch("workflow/withdrawProve", data)
        .then((res) => {
          _this.loading = false;
          this.callback();
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    getRejectNodes() {
      console.log(this.workStep);
      this.$store
        .dispatch("workflow/GetRejectNodes", { workStepId: this.workStep.id })
        .then((res) => {
          this.workStep.rejectNodes = res;
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    onUserSelected(value)
    {
      this.workStep.users = value.users
    }
  },
};
</script>

<style></style>
